<template>
  <div>
    <el-card>
      <refresh
        title="会员概况"
        :isShow="isOpenEyes"
        @refresh="handleRefresh"
        @switch-handle="onClickAction"
      />
      <!-- 统计 -->
      <div class="brandList">
        <div
          v-for="item in realTimeData"
          :key="item.baseData.key"
          class="brand"
          :class="isClick === item.baseData.key ? 'active' : ''"
          @click="handleSelect(item)"
        >
          <div>
            <div class="textClass">{{ item.baseData.label }}</div>
            <div class="numClass">{{ isOpenEyes ? item.baseData.value || 0 : '****' }}</div>
            <div class="yesterdayClass">
              昨日:{{ isOpenEyes ? item.yesterdayData.value || 0 : '****' }}
            </div>
          </div>
        </div>
      </div>
      <div class="mt-20">
        <LineChart
          :title="title"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :legend="legend"
          :series-data="seriesData"
          :color="color"
        />
      </div>
    </el-card>

    <div class="textNumberClass mt-20">
      <div v-for="item in userAttributeData" :key="item.key" class="charactersClass">
        <div>{{ item.name }}</div>
        <div class="number">{{ item.value }}</div>
      </div>
    </div>
    <el-card class="mt-20">
      <el-row>
        <el-col :span="12">
          <pie-chart
            :color="userAttributeObj.color"
            :legend="userAttributeObj.legend"
            :series-obj="userAttributeObj.seriesObj"
            :tooltip="userAttributeObj.tooltip"
          ></pie-chart>
        </el-col>
        <el-col :span="12">
          <div class="rightClass mt-30">
            <div class="mt-20">
              重点客户：<span class="spanClass">有效购买次数大于3笔且单价大于100。 </span>
            </div>
            <div class="mt-20">首单客户：<span class="spanClass">下单并付款一次客户</span></div>
            <div class="mt-20">
              正常客户：<span class="spanClass"> 近30天有购买1单或者浏览次数大于0次。</span>
            </div>
            <div class="mt-20">活跃客户：<span class="spanClass">近30天有购买1单以上。</span></div>
            <div class="mt-20">新用户：<span class="spanClass">未下过订单的客户。</span></div>
            <div class="mt-20">潜力客户：<span class="spanClass">每30天内只消费一次。</span></div>
            <div class="mt-20">
              沉睡客户：<span class="spanClass">30天以上无访问记录的客户。</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!--    <div class="textNumberClass mt-20">-->
    <!--      <div v-for="item in platformConversionData" :key="item.key" class="charactersClass">-->
    <!--        <div>{{ item.name }}</div>-->
    <!--        <div class="number">{{ item.value }}</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <el-card class="mt-20">-->
    <!--      <pie-chart-->
    <!--        :color="platformConversionObj.color"-->
    <!--        :legend="platformConversionObj.legend"-->
    <!--        :series-obj="platformConversionObj.seriesObj"-->
    <!--        :tooltip="platformConversionObj.tooltip"-->
    <!--      ></pie-chart>-->
    <!--    </el-card>-->
  </div>
</template>

<script>
import { useFilterSingleStatistics } from '@/hooks'

export default {
  name: 'memberOverview',
  data() {
    return {
      isOpenEyes: true,
      isClick: 'newMember',
      realTimeData: [
        {
          baseData: {
            key: 'newMember',
            label: '累计新增会员',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayNewMember',
            value: 0
          }
        },
        {
          baseData: {
            key: 'visitNum',
            label: '累计访问客数',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayVisitNum',
            value: 0
          }
        },
        {
          baseData: {
            key: 'payMember',
            label: '支付会员数',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayPayMember',
            value: 0
          }
        },
        {
          baseData: {
            key: 'payNum',
            label: '客户支付单数',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayPayNum',
            value: 0
          }
        },
        {
          baseData: {
            key: 'payMoney',
            label: '客户支付金额',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayPayMoney',
            value: 0
          }
        },
        {
          baseData: {
            key: 'freightMoney',
            label: '客户支付运费',
            value: 0
          },
          yesterdayData: {
            key: 'yesterdayFreightMoney',
            value: 0
          }
        }
      ],
      userAttributeData: [
        {
          key: 'highActiveUser',
          name: '重点活跃用户',
          value: 0
        },
        {
          key: 'firstOrderUser',
          name: '首单客户',
          value: 0
        },
        {
          key: 'normalUser',
          name: '正常客户',
          value: 0
        },
        {
          key: 'activeUser',
          name: '活跃客户',
          value: 0
        },
        {
          key: 'newUser',
          name: '新用户',
          value: 0
        },
        {
          key: 'highUser',
          name: '潜力客户',
          value: 0
        },
        {
          key: 'sleepUser',
          name: '沉睡客户',
          value: 0
        }
      ],
      platformConversionData: [
        {
          key: 'highActiveUser',
          name: '挖咖平台转化',
          value: 0
        },
        {
          key: 'firstOrderUser',
          name: '酒馆长平台转化',
          value: 0
        },
        {
          key: 'normalUser',
          name: '秦宗平台转化',
          value: 0
        },
        {
          key: 'activeUser',
          name: '机咖平台转化',
          value: 0
        }
      ],
      // 走势折线图相关
      title: {
        text: '近30天数据'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      legend: {
        icon: 'circle',
        data: ['累计新增会员数']
      },
      color: ['#7AA3EF'],
      seriesData: [],
      userAttributeObj: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: []
        },
        color: ['#1C27C1', '#68BBC4', '#58A55C', '#F2BD42', '#EE752F', '#D95040', '#1989FA'],
        seriesObj: {
          name: '',
          type: 'pie',
          radius: '75%',
          label: {
            normal: {
              formatter: '{b}  ({d}%)'
            }
          },
          center: ['50%', '60%'],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      },
      platformConversionObj: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}个 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: []
        },
        color: ['#5087EC', '#68BBC4', '#58A55C', '#F2BD42'],
        seriesObj: {
          name: '',
          type: 'pie',
          radius: '75%',
          label: {
            normal: {
              formatter: '{b}  ({c}个)'
            }
          },
          center: ['50%', '60%'],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      }
    }
  },
  created() {
    this.handleStatistics()
    this.handleMemberTrend()
    this.handleUserAttribute()
    this.handlePlatformConversion()
  },
  methods: {
    handleRefresh() {},
    //是否隐藏数据
    onClickAction(val) {
      this.isOpenEyes = val
    },
    handleSelect(item) {
      this.isClick = item.baseData.key
    },
    //获取新增会员走势
    async handleMemberTrend() {
      const { data } = await this.$http.user.user.getMemberTrend()
      this.seriesData = [
        {
          name: '累计新增会员数',
          type: 'line',
          data: data.map(item => item.newMemberCount || 0)
        }
      ]
      this.xAxis.data = data.map(item => item.date)
    },
    //获取用户属性数据
    async handleUserAttribute() {
      const { data } = await this.$http.user.user.getUserAttribute()
      this.userAttributeData = this.userAttributeData.map(item => {
        item.value = data[item.key]
        if (item.key === 'normalUser') {
          item.value = Number(data.normalActiveUser) + Number(data.normalOrderUser)
        }
        return item
      })
      this.userAttributeObj.seriesObj.data = this.userAttributeData
    },
    //获取平台转化数据
    async handlePlatformConversion() {
      const { data } = await this.$http.user.user.getPlatformConversion()
      this.platformConversionData = this.platformConversionData.map(item => {
        item.value = data[item.key]
        return item
      })
      this.platformConversionObj.seriesObj.data = this.platformConversionData
    },
    async handleStatistics() {
      const { data } = await this.$http.user.user.getMemberStatistics()
      this.realTimeData = useFilterSingleStatistics(this.realTimeData, data)
    }
  }
}
</script>

<style lang="scss" scoped>
.brandList {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .brand {
    width: 160px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 100);
    // text-align: center;
    border: 1px solid rgba(232, 232, 233, 100);
    margin-top: 3px;
    margin-right: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    cursor: pointer;
    .textClass {
      font-size: 14px;
      font-weight: bold;
    }
    .numClass {
      margin: 8px 0;
      font-size: 30px;
      font-weight: bold;
    }
    .yesterdayClass {
      font-size: 14px;
      color: #000000;
    }
  }

  .active {
    // text-align: center;
    border: 1px solid rgba(246, 81, 0, 100);
  }
}
.textNumberClass {
  padding: 10px 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .charactersClass {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
  .number {
    font-size: 24px;
    font-weight: bold;
    margin-top: 8px;
  }
}

.rightClass {
  margin-left: 20px;
  flex: 1;
  font-size: 18px;
  font-weight: bold;
}

.spanClass {
  font-size: 16px;
  color: #101010;
  font-weight: normal;
}
</style>
